<template>
 <div>
     <el-table
    :data="tableData"
    stripe
    style="width: 100%">
    <el-table-column
      prop="number"
      label="试题编号"
      width="120">
    </el-table-column>
    <el-table-column
      prop="subject"
      label="学科"
      width="80">
    </el-table-column>
    <el-table-column
      prop="catalog"
      label="目录"
       width="80">
    </el-table-column>
    <el-table-column
      prop="questionType"
      label="题型"
       width="80">
    </el-table-column>
    <el-table-column
      prop="question"
      label="题干"
       width="280"
       >
    </el-table-column>
    <el-table-column
      prop="addDate"
      label="录入时间"
       width="180">
    </el-table-column>
    <el-table-column
      prop="difficulty"
      label="难度"
       width="80">
    </el-table-column>
    <el-table-column
      prop="creator"
      label="录入人"
       width="80">
    </el-table-column>
    <el-table-column
      label="操作"
      width="180">
       <template slot-scope="scope">
      <div class="caozuo">
      <div class="icon-box view" @click="handlePreview(scope.row)">
          <i class="el-icon-view"></i>
      </div>
      <div class="icon-box edit"
      @click="handleEdit(scope.row)">
          <i class="el-icon-edit"></i>
      </div>
      <div class="icon-box delete" @click="hanleDelete(scope.row)">
          <i class="el-icon-delete"></i>
      </div>
      <div class="icon-box check"
      @click="hanleAdd(scope.row)">
          <i class="el-icon-check"></i>
      </div>
      </div>
       </template>
    </el-table-column>
  </el-table>
      <el-pagination
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
      :current-page="questionRequest.page"
      :page-sizes="[5, 10, 20, 40]"
      :page-size="questionRequest.pagesize=5"
      layout=" sizes, prev, pager, next, jumper"
      :total="total"
      >
      <!-- 表格区域 -->
    </el-pagination>
 <previewDialog :dialogTableVisible="dialogTableVisible" :rowdata="rowdata"></previewDialog>
 </div>
</template>
<script>
import { dataFormate } from '../../utils/dataformat'
import eventBus from '../../utils/eventBus'
import previewDialog from './preview-dialog'
// import {questionType,difficulty} from '../../api/hmmm/constants'
// import {parseTime} from '../../utils/index'
import { list as questionsList, remove, choiceAdd } from '../../api/hmmm/questions'

export default {
  props: [],
  data () {
    return {
      rowdata: [],
      dialogTableVisible: false,
      tableData: [],
      currentPage: '',
      total: 0,
      questionRequest: {
        pagesize: 1,
        page: 1,
        difficulty: '困难'
      }
    }
  },
  components: {
    previewDialog
  },
  watch: {},
  computed: {},
  created () {
    // 兄弟传参，获取search-info的数据
    eventBus.$on('screenData', (message) => {
      this.questionRequest = { ...this.questionRequest, ...message }
      this.getquestionList(this.questionRequest)
    })

    this.getquestionList(this.questionRequest)
  },
  methods: {
    // 当前页码改变
    handleCurrentChange (val) {
      this.questionRequest.page = val
      this.getquestionList(this.questionRequest)
    },
    // 改变页码
    handleSizeChange (val) {
      this.questionRequest.pagesize = val
      this.getquestionList(this.questionRequest)
    },
    // 预览
    handlePreview (id) {
      this.dialogTableVisible = true
      this.rowdata = id
      console.log(id)
    },
    // 修改
    handleEdit (data) {
      this.$router.push({ name: 'questions-new', query: { id: data.id } })
    },
    // 删除
    hanleDelete (id) {
      // 发请求
      this.$confirm('确定删除吗').then(async () => {
        const res = await remove(id)
        console.log(res)
      }).catch(() => {
        console.log('删除取消')
      })
    //
    //
    },
    async getquestionList (data) {
      const res = await questionsList(data)
      // this.tableData=res.data.items
      // 处理翻页数据
      // 1.总数
      this.total = res.data.counts
      console.log(res.data)
      // 处理数据
      dataFormate(res.data.items)
      this.tableData = res.data.items
    },
    hanleAdd (id) {
      this.$confirm('是否添加到精选题库').then(async () => {
        const res = await choiceAdd({ id: id.id, choiceState: 1 })
        console.log(res)
      }).catch(() => {
        console.log('删除取消')
      })
    }

  }
}
</script>

<style lang="less" scoped>
.icon-box {
  display: flex;
  justify-content: center;
  width: 32px;
  height: 32px;
  border-radius: 16px;
  &.view {
    border: 1px solid rgb(64, 158, 255);
    color: rgb(64, 158, 255);
  }
  &.view:hover {
    color: white;
    background-color: rgb(64, 158, 255);
  }
  &.edit {
    border: 1px solid rgb(103, 194, 58);
    color: rgb(103, 194, 58);
  }
  &.edit:hover {
    color: white;
    background-color: rgb(103, 194, 58);
  }
  &.delete {
    border: 1px solid rgb(245, 108, 108);
    color: rgb(245, 108, 108);
  }
  &.delete:hover {
    color: white;
    background-color: rgb(245, 108, 108);
  }
  &.check {
    border: 1px solid rgb(230, 162, 60);
    color: rgb(230, 162, 60);
  }
  &.check:hover {
    color: white;
    background-color: rgb(230, 162, 60);
  }
  > i {
    margin: auto;
  }
}
.caozuo {
  display: flex;
  justify-content: space-evenly;
}
</style>
